<!--<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地理信息管理</title>-->
    <!--全局样式-->
#@layout()

#define css()
    <style type="text/css">
        .isAll{
            background-image: url(http://47.105.208.60:8080/wechat-api/images/loginbg.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
        form#index {
            margin-left:auto;
            margin-right:auto;
            max-width: 500px;
            background: #F7F7F7;
            opacity:0.95;
            padding: 25px 15px 25px 10px;
            font: 12px Georgia, "Times New Roman", Times, serif;
            color: #888;
            text-shadow: 1px 1px 1px #FFF;
            border:1px solid #E4E4E4;
            text-align:center;
        }
        form#index h3 {
            font-size: 25px;
            padding: 0px 0px 10px 40px;
            display: block;
            border-bottom:1px solid #E4E4E4;
            margin: -10px -15px 30px -10px;;
            color: #888;
            text-align:center;
        }
        form#index label {
            display: block;
            margin: 0px;
        }
        form#index label>span {
            float: left;
            width: 20%;
            text-align: right;
            padding-right: 10px;
            margin-top: 10px;
            color: #888;
        }
        form#index input[type="text"], form#index input[type="number"] {
            border: 1px solid #DADADA;
            color: #888;
            height: 30px;
            margin-bottom: 16px;
            margin-right: 6px;
            margin-top: 2px;
            outline: 0 none;
            padding: 3px 3px 3px 5px;
            width: 70%;
            font-size: 12px;
            line-height:15px;
            box-shadow: inset 0px 1px 4px #ECECEC;
            -moz-box-shadow: inset 0px 1px 4px #ECECEC;
            -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
        }
        form#index .button {
            background: #E27575;
            border: none;
            padding: 10px 25px 10px 25px;
            color: #FFF;
            box-shadow: 1px 1px 5px #B6B6B6;
            border-radius: 3px;
            text-shadow: 1px 1px 1px #9E3F3F;
            cursor: pointer;
        }
        .isAll{
            position: relative;
            z-index: 1;
            display: flex;
            align-content: center;
            justify-content: space-between;
            width:94%;
            height: 100%;
            margin:0 3%;
        }
        .divForm{
            position: absolute;
            z-index: 2;
            width:95%;
        }
        .divLook{
            position: absolute;
            z-index: 3;
            height:230px;
            width:200px;
            background-color: #FFFFFF;
            margin-top: 20%;
            margin-left:75%;
            /*opacity: 0.5;*/
            border-radius: 10px;
        }
        .divtitle{
            hieght:23px;
            font-size: 16px;
            /*align-items: center;*/
            align-content: center;
            justify-content: center;
            word-break: break-all;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            overflow: hidden;
            border-bottom: 1px #dedede solid;
            text-align:center;
            margin:4px;
            color: #1c2438;;
        }
        .cont{
            font-size: 12px;
            height:32px;
            width: 95%;
            margin: 0 4%;
            margin-top: 2px;
            word-break: break-all;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            padding-right: 5pt;
            overflow: hidden;
            color: #cccaca;
        }
        .contTitle{
            font-size: 14px;
            color: #cccaca;
            margin: 2px 3px;
        }
        .conPhoneType{
            hieght:19px;
        }
        .conPhone{
            font-size: 12px;
            height: 16px;
            width: 95%;
            margin: 0 4%;
            margin-top: 4px;
            word-break: break-all;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            padding-right: 5pt;
            overflow: hidden;
            color: #cccaca;
        }
        .conSummary{
            font-size: 12px;
            height: 47px;
            width: 95%;
            margin: 0 4%;
            margin-top: 4px;
            word-break: break-all;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            display: -webkit-box;
            padding-right: 5pt;
            overflow: hidden;
            color: #cccaca;
        }
        .divFoot{
            border-top: 1px #dedede solid;
            height: 20px;
            font-size: 14px;
            display:flex;
            align-content: center;
            justify-content: space-between;
            margin-top: 5px;
        }
        .divLeft{
            width: 50%;
            color: #666;
            text-align: center;
            border-right: 1px solid #dedede;
            padding-top: 2px;
            /*color: #cccccc;*/
        }
        .divRight{
            width: 50%;
            color: #0095ec;
            text-align: center;
            padding-top: 2px;
        }
    </style>
#end
#define script()
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>

    <script>
        function chaxun() {
            //输入数据进行查询
            if(document.getElementById("id").value != "") {
                window.open("#(CPATH)/admin/invest/a?num=" + document.getElementById("id").value, "newwindow1", "height=600, width=1000, top=100, left=200, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no")
                // obj.document.write(data);
            }
        }

        function yulan(){
            var lookOrNo = document.getElementById("look").value;
            var title = document.getElementById("name").value;
            title == ""?title="此处是标题":title;//地点名称
            var address = document.getElementById("address").value;//详细地址
            var phonetype = document.getElementById("phonetype").value;//电话类型
            phonetype == ""?phonetype="此处是电话类型":phonetype;//地点名称
            var userphone = document.getElementById("userphone").value;//电话
            var summary = document.getElementById("summary").value;//简介

            document.getElementById("title").textContent = title;
            document.getElementById("conAddr").textContent = address;
            document.getElementById("conPhoneType").textContent = phonetype+":";
            document.getElementById("conPhone").textContent = userphone;
            document.getElementById("conSummary").textContent = summary;
            if(lookOrNo == "预览"){
                document.getElementById("divLook").style.display = ""
                document.getElementById("look").value = "取消预览"
            }else{
                document.getElementById("divLook").style.display = "none"
                document.getElementById("look").value = "预览"
            }

        }

        function tijiao() {
            var count = 0;
            var checkArry = document.getElementsByName("etype");
            for (var i = 0; i < checkArry.length; i++) {
                if(checkArry[i].checked == true){
                    //选中的操作
                    count++;
                }
            }

            if( count == 0 ){
                alert("请选择类型")
                return false;
            }
                console.log(JSON.stringify($('#index').serializeJSON()))
            $.ajax({

                url:"http://47.105.208.60:8080/wechat-api/api/saveAtlas",
                //url:"/api/saveAtlas",
                data:
                    JSON.stringify($('#index').serializeJSON()),

                type: 'POST',
                dataType: "json",
                contentType:"application/json",
                success : function(data) {
                    console.log("+++++++++")
                    console.log(data)
                    alert("提交成功")
                    document.getElementById("index").reset();

                    window.location.href="#(CPATH)/admin/invest/b";
                    //return;
                },error: function(err){
                    console.log("----------")
                    console.log(err)
                    alert("提交失败")
                }
            });
            /* locd();*/

        }

    </script>
<script>
    //选择单选框实时将内容添加到input文本框
    console.log("1");
    $("input[type='radio']").change(function(){
        console.log(11111);
        var result="";
        $("input[name='etype']:checked").each(function(){
            result+=$(this).val()+'、';
        });
        if(result!=""){
            result=result.substring(0,result.indexOf ('、'));
        }
        $("#addressType").val(result);
    });
</script>
#end
<!--</head>

<body>-->
#define content()
<div class="isAll">
    <div class="divForm">

        <form id="index" onsubmit="return false" action="##" method="post" class="form1">
            <h3 style="align-content: center">地理信息管理页面</h3>
            <label>
                <span>地点编号: </span>
                <input type="text" name="id" class="id" id="id" onblur="chaxun()">
            </label>
            <label>
                <span>地点名称:</span>
                <input type="text" name="name" class="name" id="name">
            </label>
            <label>
                <span>详细地址:</span>
                <input type="text" name="address" class="address" id="address">
            </label>
            <label>
                <span>地点类型:</span>
                <input type="text" name="addressType" class="addressType" id="addressType">
            </label>
            <label>
            <span>请选择一个地点类型作为小程序页面展示:</span>
                <input type="radio" name="etype" value="游客接待服务中心" id="etype1">游客接待服务中心
                <input type="radio" name="etype" value="风景点" id="etype2">风景点
                <input type="radio" name="etype" value="骑行道" id="etype3">骑行道
                <input type="radio" name="etype" value="登山道" id="etype4">登山道<br>
                <input type="radio" name="etype" value="特色水果采摘区" id="etype5">特色水果采摘区
                <input type="radio" name="etype" value="特色摄影点" id="etype6">特色摄影点
                <input type="radio" name="etype" value="民宿" id="etype7">民宿
                <input type="radio" name="etype" value="特色农产品销售点" id="etype8">特色农产品销售点<br>
                <input type="radio" name="etype" value="公共厕所" id="etype9">公共厕所
                <input type="radio" name="etype" value="驿站" id="etype10">驿站
                <input type="radio" name="etype" value="停车场" id="etype11">停车场
                <input type="radio" name="etype" value="乡镇人民政府" id="etype12">乡镇人民政府<br>
                <input type="radio" name="etype" value="村委会" id="etype13">村委会
                <input type="radio" name="etype" value="田园餐桌" id="etype14">田园餐桌<br>
            </label><br>
            <label>
                <span>经度:</span>
                <input type="text" name="longitude" class="longitude" id="longitude"readonly>
            </label>
            <label>
                <span>纬度:</span>
                <input type="text" name="latitude" class="latitude" id="latitude" readonly>
            </label>

            <label>
                <span>简介:</span>
                <input type="text" name="summary" class="summary" id="summary">
            </label>
            <label>
                <span>乡镇特色: </span>
                <input type="text" name="distinctive" class="distinctive" id="distinctive">
            </label>

            <label>
                <span>联系人: </span>
                <input type="text" name="username" class="username" id="username">
            </label>
            <label>
                <span>联系电话类型:</span>
                <input type="text" name="phonetype" class="phonetype" id="phonetype">
            </label>
            <label>
                <span>联系电话:</span>
                <input type="number" name="userphone" class="userphone" id="userphone">
            </label>
            <label>
                <span>乡镇联系人: </span>
                <input type="text" name="townsname" class="townsname" id="townsname">
            </label>
            <label>
                <span>乡镇联系电话:</span>
                <input type="number" name="townsphone" class="townsphone" id="townsphone">
            </label>
            <label>
                <span>上报人:</span>
                <input type="text" name="report" class="report" id="report">
            </label>
            <label>
                <span>上报单位:</span>
                <input type="text" name="unit" class="unit" id="unit">
            </label>
            <input id="look"  type="button" class="button" value="预览" onclick="yulan()">&nbsp;&nbsp;&nbsp;
            <input  type="button" class="button" value="提交" onclick="tijiao()">&nbsp;&nbsp;&nbsp;
            <input  type="reset" class="button" value="重置" >
        </form>

    </div>
    <div class="divLook" id="divLook" style="display: none">
        <div class="divtitle" id="title" style=""></div>
        <div id="content">
            <label class="contTitle">详细地址&nbsp;:</label><br>
            <div id="conAddr" class="cont"></div>
            <div class="contTitle conPhoneType" id="conPhoneType">
            </div>
            <div id="conPhone" class="conPhone">
            </div>
            <div class="contTitle">简介&nbsp;:</div>
            <div id="conSummary" class="conSummary">
            </div>
            <div class="divFoot">
                <div class="divLeft">取消</div>
                <div class="divRight">导航</div>
            </div>
        </div>
    </div>
    <!--<div></div>-->
</div>
#end
<!--</body>

</html>-->
